<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="common/images/logo.png" />
    <title>山西鸿天汽车服务有限公司</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑 Light";
        }

        .all {
            width: 100%;
            height: 100vh;
            min-width: 1027px;
            background-color: #105a7a;
            position: relative;
        }

        .left {
            width: 57%;
            height: 100vh;
            position: absolute;
            overflow: hidden;
        }

        .logo {
            padding: 60px;
        }

        .logo img {
            width: 180px;
            height: 84px;
        }

        .title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .title p {
            text-align: center;
            color: #ffffff;
            font-weight: bold;
        }

        .t1 {
            font-size: 4rem;
            font-weight: bold;
        }

        .t2 {
            margin-top: 6px;
            font-size: 2rem;
        }

        #three {
            position: absolute;
            bottom: 0;
        }

        .end {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translate(-50%);
            font-size: 10px;
            color: #ffffff;
        }

        .right {
            width: 43%;
            height: 100vh;
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.8);
        }

        .right .background {
            width: 100%;
            height: 100%;
            max-height: 100vh;
            background: url(common/images/456-543.png) no-repeat;
            background-size: 50%, 50%;
            background-position: right;
            overflow: hidden;
        }

        .right-area {
            width: 440px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .icon-one {
            display: flex;
            margin-bottom: 70px;
        }

        .icon-one img {
            width: 44px;
            height: 44px;
        }

        .icon-one div {
            margin-left: 16px;
            color: #0d4a65;
        }

        .input-item {
            margin-top: 20px;
            display: flex;
            align-items: center;
            height: 48px;
            width: 440px;
            background-color: #ffffff;
            border-radius: 24px;
        }

        #loginBtn {
            margin-top: 40px;
            cursor: pointer;
        }

        .input-item img {
            margin-left: 40px;
            width: 15px;
            height: 18px;
        }

        .input-item input {
            margin-left: 20px;
            width: 80%;
            border: none;
            outline: none;
        }

        button {
            margin-top: 40px;
            border: none;
            outline: none;
            justify-content: center;
            color: #4d4d4d;
        }

        input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #9b9b9b;
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #9b9b9b;
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #9b9b9b;
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #9b9b9b;
        }

        #loginBtn:hover {
            background-color: #105b7b;
            color: #FFFFFF;
            font-size: small;
        }
        #pwd,#uname{
            -webkit-box-shadow: 0 0 0 1000px white inset;
            font-family:"Microsoft YaHei",微软雅黑
        }
    </style>
</head>
<body>
<div class="all">
    <div class="left">
        <div class="logo">
            <img src="common/images/company.png">
        </div>
        <div class="title" style="width: 710px;">
            <p class="t1">山西鸿天汽车服务平台</p>
            <p class="t2">HONGTIAN AUTOMOTIVE SERVICE SYSTEM</p>
        </div>
        <div id='three'></div>
        <div class="end">Copyright ©2024 山西鸿天汽车服务有限公司 <a style="color: #fff;text-decoration:none;" href="https://beian.miit.gov.cn" target="_blank">晋ICP备17005539号-4</a></div>
    </div>
    <div class="right">
        <div class="background">
            <div class="right-area">
                <div class="icon-one">
                    <img src="common/images/logo.png">
                    <div>
                        <p style="font-size: 1.6rem;font-weight:bold">供应商</p>
                        <p style="font-size: 0.9rem;font-weight:600">SUPPLIER</p>
                    </div>
                </div>
                <div class="input-item">
                    <img src='common/images/user.png'>
                    <input id="uname" type="text" placeholder="请输入账号">
                </div>
                <div class="input-item">
                    <img src='common/images/resource7.png'>
                    <input id="pwd" type="password" placeholder="请输入密码">
                </div>
                <button class="input-item" id="loginBtn" type="submit">登录</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/three.min.js"></script>
<script src="js/animate.js"></script>
<script type="text/javascript" src="./common/layui/layui.js"></script>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script>
    layui.use(['jquery', 'layer'], function () {
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;

        $(function () {
            sessionStorage.clear();
            //登录按钮绑定
            $("#loginBtn").click(function () {
                toLogin();
            });

            function toLogin() {
                var uname = $("#uname").val();
                var pwd = $("#pwd").val();
                send_req('User/login', {"username": uname, "password": pwd}, function (data) {
                    sessionStorage.setItem("gysuname", JSON.stringify(data));
                    sessionStorage.setItem("logintime", new Date().getTime());
                    layer.msg('登录成功', {icon: 1, time: 1500}, function () {
                        location.href = "index.html";
                    });
                });
            }
            //回车事件
            document.onkeydown = function (event) {
                var e = event || window.event;
                if (e && e.keyCode === 13) { //回车键的键值为13
                    $("#loginBtn").click(); //调用登录按钮的登录事件
                }
            };
        });
    });

</script>

</html>